/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:22
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 10:34:07
* @Description: desc
*/
<template>
	<view class="settingInfo-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar @backClick='backClick' :title="$t('storeManagement.StoreInformation')" :navType='search.navType' :navPlaceholder='search.navPlaceholder'
				:navThmen='search.navThmen'  @focusEvent='focusEvent' @switchSvgEvent='switchSvgEvent'>
			</c-navigation-bar>

			<view class="container-box button-group">
				<view class="avatarBox">
					<u-avatar :src="$u.file.getMedieUrl(modifyData.shopAvatarUrl)" mode='square' size="200" @click="changeAvatar()"></u-avatar>
					<view class="avatarName">
					</view>
				</view>
			<!-- 	<u-button @click="buttonClick">

					{{$t('storeManagement.changePassword')}}
					<u-icon name="arrow-right" size="35rpx">
					</u-icon>
				</u-button> -->
			</view>
			<u-form :model="modifyData" ref="uForm">
				<u-form-item :label="$t('storeManagement.ShopName')" labelPosition="top">
					<u-input v-model="modifyData.shopName" :maxlength="48" placeholder='' />
				</u-form-item>
			</u-form>
			<view class="popTitle">
				*{{$t('storeManagement.ShopIntroduction')}}
			</view>
			<view class="">
				<u-input v-model="shopIntroduction" type="" border height="228" placeholder='' />
			</view>

			<!-- 底部 -->
			<view class="bootom">
				<u-button type="primary" @click="editShop">{{$t('system.Submit')}}
				</u-button>
			</view>

		</c-layout>


	</view>
</template>
<script>
	import COS from '@/static/js/COS.js'
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
		
				},
				shopIntroduction: '',
				modifyData: {
					shopName: '',
					shopAvatarUrl: ''
				}
			}
		},
		onLoad() {
			this.$u.get('/app/shop').then(res => {
				this.modifyData.shopName = res.data.shopName
				this.modifyData.shopAvatarUrl = res.data.shopAvatarUrl
				this.shopIntroduction = res.data.intro
			})
		},
		methods: {
		changeAvatar() {
			let that=this
			uni.chooseImage({
				count: 1,
				success: (rst) => {
					let filePath = rst.tempFiles[0].path;
					let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
					COS.uploadFileToTencentClound(filename, filePath,'user_top').then((res) => {
						that.modifyData.shopAvatarUrl =res.split(`${process.uniEnv.COSBucket}.cos.${process.uniEnv.COSRegion}.myqcloud.com/`)[1]
						console.log(that.modifyData.shopAvatarUrl)
					})
					
				}
			});
			
		},
			buttonClick() {
				uni.navigateTo({
					url: '/pages/storyType/storeManagement/modify',
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			backClick(){
				this.$u.route('pages/storyType/storeManagement/storeSetting')
			},
			editShop(){
				let that=this
				this.$u.put("/app/shop",{...this.modifyData,id:uni.getStorageSync('vuexShopId'),intro:this.shopIntroduction}).then(res => {
					this.$u.toast(res.msg)
					setTimeout(function () {
					    that.$u.route('pages/storyType/storeManagement/storeSetting')
					}, 1000)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.settingInfo-page {
		padding: 40rpx;

		.container-box {
			padding: 0;
		}

		.button-group {
			padding-bottom: 52rpx;

			.u-btn {
				justify-content: left;
				height: 116rpx;
				color: #000;
				padding: 0;

				&::after {
					border: 1px solid #E8E6EA;
					border-radius: 60rpx;
				}
			}

			.avatarBox {
				margin: 60rpx 0;
				text-align: center;

				.avatarName {
					height: 42rpx;
					font-size: 36rpx;
					font-family: SFUIDisplay-Medium, SFUIDisplay;
					font-weight: 500;
					color: #000000;
					line-height: 42rpx;
					margin: 42rpx 0;
				}
			}

			.u-icon {
				position: absolute;
				right: 30rpx;
			}
		}

		.bootom {
			bottom: 0;
			position: fixed;
			padding-bottom: 60rpx;
			width: 100%;
			left: 50%;
			transform: translateX(-50%);
			z-index: 999;
			background: #fff;

			uni-button {
				width: 90%;
			}
		}

		.popTitle {
			font-size: 32rpx;
			font-family: SFUIDisplay-Medium-Regular, SFUIDisplay-Medium;
			font-weight: 400;
			color: #000000;
			margin: 40rpx 0;
		}
	}
</style>
